<template>
  <div class="artcile-content">
    <div class="artcile-header">
      <div class="artcile-header__left">
        <slot name="headLeft">
          <div @click="goBack()" class="artcile-header__back">
            <i class="el-icon-arrow-left"></i> <span>返回</span>
          </div>
          <div @click="goHome()" class="artcile-header__back">
            <i class="el-icon-s-home"></i>
          </div>
        </slot>
      </div>

      <div class="artcile-header__center">
        <Toolbar
          class="toolbar"
          style=""
          :editor="editor"
          :defaultConfig="toolbarConfig"
        />
      </div>
      <div class="artcile-header__right">
        <slot name="headRight">
          <el-button type="primary" @click="submit" size="small">保存</el-button>
        </slot>
      </div>
    </div>

    <div class="article-body">
      <div class="art-body">
        <div class="art-body-center">
          <slot name="title">
            <div class="article-title" v-if="showTitle">
              <el-input
                class="article-title-input"
                v-model="title"
                maxlength="100"
                show-word-limit
                placeholder="请输入标题"
              >
              </el-input>
            </div>
          </slot>
          <el-input
            class="article-title-input"
            v-model="content"
            maxlength="100"
            show-word-limit
            placeholder="请输入标题"
          />

          <div class="art-editor">
            <Editor
              min-height="300px"
              :defaultConfig="editorConfig"
              v-model="content"
              :mode="mode"
              @onCreated="onCreated"
              ref="editors"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//import { uploads } from "@/api/file/file";
// import "./utils/boot"; 如果需要自定义的功能，引入这个，然后在代码内修改
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
  components: { Editor, Toolbar },
  props: {
    value: {}, // 绑定值
    name: {
      // 标题
      type: String,
      default: "",
    },
    showTitle: {
      // 是否显示标题
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      mode: "default",
      editor: null,
      toolbarConfig: {
        //  toolbarKeys: ["menu1Conf"],
        excludeKeys: ["fullScreen"],
        insertKeys: {
          index: 50,
          keys: [
            "code",
            "blockquote",
            // "attachment"
          ],
        },
      },
      editorConfig: {
        placeholder: "<p>请输入内容...</p>",
        autoFocus: false,
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          uploadImage: {
            customUpload: this.uploadImage,
          },
        },
      },
    };
  },
  computed: {
    content: {
      get() {
        return this.value;
      },
      set(val) {
        console.log(val);
        this.$emit("input", val);
      },
    },
    title: {
      get() {
        return this.name;
      },
      set(val) {
        this.$emit("update:name", val);
      },
    },
  },
  created() {},
  methods: {
    async uploadImage(file, insertFn) {
      // 修改上传图片的接口 ，注意粘贴图片也回调用此接口，所以建议采用此方法，调用方法在README.md 内

      console.log(file, insertFn);
      /* await uploads({ file }).then((res) => {
        let url = this.$host + res.data.file_path; //拼接成可浏览的图片地址
        insertFn(url, "xhcss", url); //插入图片
      });*/
    },
    getKeys() {},
    onChange(editor) {
      console.log(editor);
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
    },

    submit() {
      // 保存按钮
      this.$emit("submit");
    },
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="scss" scoped>
.artcile-content {
  height: calc(100%);
  background-color: rgb(245, 245, 245);
  overflow-y: auto;
  position: relative;

  display: flex;
  flex-direction: column;

  .artcile-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;

    ::v-deep {
      .w-e-bar {
        justify-content: center;
      }
    }
  }
}

.artcile-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  background-color: #fff;

  &__left {
    display: flex;
    align-items: center;
    padding: 0px 20px;
  }

  &__back {
    cursor: pointer;
    margin-right: 20px;

    &:hover {
      color: #333;
    }
  }

  &__center {
    flex: 1;
  }
}

.article-body {
  position: relative;
  z-index: 1;
  min-height: 900px;

  width: 850px;

  margin: 30px auto 100px auto;

  .art-body {
    margin-bottom: 50px;

    &-center {
      background-color: #fff;
      border-radius: 5px;
      padding: 20px 50px 50px 50px;
      border: 1px solid #e8e8e8;
      box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
    }
  }

  .art-editor {
    min-height: 900px;
    margin-top: 20px;
  }

  ::v-deep {
  }
}

.article-title {
  ::v-deep {
    .el-input-group__append {
      width: 200px;
      padding: 0;
      background-color: transparent;
    }

    .el-input__inner {
      line-height: 60px;
      height: 60px;
      border: none;
      border-bottom: 1px solid #ccc;
      font-size: 28px;
    }
  }
}
</style>
